<template>
	<view class="box-main">
		<view class="mb-50">
			<view class="mt-50 flex ac sb">
				<view>
					<text class=" c-999 fs-34">公司名称</text>
					<text class="must ml-10">*</text>
				</view>
				<view style="width: 70%;">
					<input maxlength="30" :adjust-position='false' class="fs-32 mr-5" style="text-align: right;"
						placeholder-class="placeholder" type="text" v-model="form.name" placeholder="请输入公司名称" />
				</view>
			</view>
			<view class="mt-30 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
		</view>
		<view class="mb-50">
			<view class="mt-50 flex ac sb">
				<view>
					<text class=" c-999 fs-34">职位</text>
					<text class="must ml-10">*</text>
				</view>
				<view style="width: 70%;">
					<input maxlength="8" :adjust-position='false' class="fs-32 mr-5" style="text-align: right;"
						placeholder-class="placeholder" type="text" v-model="form.post" placeholder="请输入职位" />
				</view>
			</view>
			<view class="mt-30 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
		</view>
		<view class="mb-50 fs-32 ">
			<view @click="selecthy" class=" flex ac sb">
				<view class="line-1" style="width: 60%;">
					<text class="fs-34 c-999">行业</text>
					<text class="must ml-10">*</text>
				</view>
				<view style="text-align: right;color: #999;">
					<text v-if="!form.industry" class="fs-34">请选择行业</text>
					<text v-else class="fs-34" style="color: #21252B;">{{form.industry}}</text>
					<text v-if="!form.industry" class="iconfont icon-gengduo3 fs-24 ml-5"></text>
				</view>
			</view>
			<view class="mt-20 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
		</view>
		<view class="mb-50 fs-32 ">
			<view @click="selectAddr" class=" flex ac sb">
				<view class="line-1" style="min-width: 180rpx;">
					<text class="fs-34 c-999">公司所在地</text>
					<text class="must ml-10">*</text>
				</view>
				<view style="text-align: right;color: #999;">
					<text v-if="!form.addr" class="fs-34">请选择地址</text>
					<text v-else class="fs-34" style="color: #333333;">{{form.addr || ''}}</text>
					<text v-if="!form.addr" class="iconfont icon-gengduo3 fs-24 ml-5"></text>
				</view>
			</view>
			<view class="mt-20 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
		</view>
		<view class="mb-50">
			<view class="mt-50 flex ac sb">
				<view>
					<text class=" c-999 fs-34">详细地址</text>
					<text class="must ml-10">*</text>
				</view>
				<view style="width: 70%;">
					<input :adjust-position='false' class="fs-32 mr-5" style="text-align: right;"
						placeholder-class="placeholder" type="text" v-model="form.descAddr" placeholder="请输入详细地址" />
				</view>
			</view>
			<view class="mt-30 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
		</view>

		<view class="mb-50 fs-32 ">
			<view @click="selectScale" class=" flex ac sb">
				<view class="line-1" style="width: 60%;">
					<text class="fs-34 c-999">企业规模</text>
				</view>
				<view style="text-align: right;color: #999;">
					<text class="fs-34">请选企业规模</text>
					<text class="iconfont icon-gengduo3 fs-24 ml-5"></text>
				</view>
			</view>
			<view class="flex ww">
				<view @click="deleteScale(item,index)" class="mt-30 box-item-box mr-15"
					v-for="(item,index) in form.scale" :key="index">
					<text>{{item || ''}}</text>
					<text class="iconfont icon-guanbi1 ml-10"></text>
				</view>
			</view>
			<view class="mt-20 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
		</view>



		<!-- <view class="box-default">
			<view class="flex fc " style="align-items: flex-end;">
				<view class="fs-32" style="color: #333333;">
					<text>设置为默认身份</text>
				</view>
				<view style="color: #999999;" class="mt-10">
					发名片会使用该身份
				</view>
			</view>
			<view class="ml-20">
				<switch checked color="#CF9B62" style="transform:scale(0.9)" />
			</view>
		</view> -->

		<view v-if="!options.id" @click="submitClick" class="box-btn-save">
			保存
		</view>

		<view v-else @click="submitUpdateClick" class="box-btn-save">
			确定修改
		</view>


		<!-- 行业 -->
		<uni-popup borderRadius='20px 20px 20px 20px' ref="popupHy" background-color="#fff">
			<view class="popup-content bb">
				<view class="box-popupLabel p-20 tc  pos-r">
					<text class="fw fs-34">选择行业</text>
					<text @click="closeHyPoup" class="iconfont icon-guanbi1 pos-a"
						style="right: 10rpx;font-size: 50rpx;"></text>
				</view>
				<scroll-view scroll-y style="height: 64vh;">
					<view @click="selectIndustry(item,index)" class="boo-hy-for" v-for="(item,index) in  industryList"
						:key="index">
						<text>{{item.name || ''}}</text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- end -->

		<!-- 企业规模 -->
		<uni-popup borderRadius='20px 20px 20px 20px' ref="popupScalePoup" background-color="#fff">
			<view class="popup-content bb">
				<view class="box-popupLabel p-20 tc  pos-r">
					<text class="fw fs-34">选择企业规模</text>
					<text @click="closeScalePoup" class="iconfont icon-guanbi1 pos-a"
						style="right: 10rpx;font-size: 50rpx;"></text>
				</view>
				<scroll-view scroll-y style="height: 60vh;">
					<view v-for="(item,index) in labelList" :key="item.id">
						<view class="p-20">
							<text style="color: #999;">{{item.name}}</text>
						</view>
						<view class=" box-item-boxs">
							<view @click="selectScaleItem(item,cur)" v-for="(cur,_index) in item.label" :key="cur.id"
								class="box-item" :class="cur.select ? 'box-item-active' : 'box-item'">
								{{cur.name || ''}}
							</view>
						</view>
					</view>
					<view style="height: 40rpx;"></view>
				</scroll-view>
				<view @click="completeScale" class="box-label-pop-btn">
					<text>确定</text>
				</view>
			</view>
		</uni-popup>
		<!-- end -->

		<!-- 地址选择器 -->
		<UniAddressSelector v-if="showUniAddressSelector" :areaInfoSelected="areaInfoObj" @cancel="handleCancel"
			@confirm="handleConfirm">
		</UniAddressSelector>
		<!-- end -->

	</view>
</template>

<script>
	import {
		otherLabel,
		cardPositionCreate,
		cardPositionUpdate,
		cardPositionGetDetail
	} from '@/api/extend.js'
	import UniAddressSelector from '@/pages/extend/components/LukeUniappAddressSelector/components/UniAddressSelector.vue'
	export default {
		components: {
			UniAddressSelector
		},
		data() {
			return {
				industryList: [], //行业
				showUniAddressSelector: false,
				areaInfoObj: {
					provinceObj: {
						areaCode: '',
						areaName: '',
					},
					cityObj: {
						areaCode: '',
						areaName: '',
					},
					cityObj: {
						areaCode: '',
						areaName: '',
					},
					areaObj: {
						areaCode: '',
						areaName: '',
					},
					streetObj: {
						areaCode: '',
						areaName: '',
					},
				},
				labelList: [],
				areaCode: '',
				form: {
					name: '',
					post: '',
					addr: '',
					descAddr: '',
					industry: '',
					scale: []
				}
			}
		},
		onLoad(options) {
			this.options = options;
			this.otherLabelFunc();
			this.otherLabelList();

			if (this.options.id) {
				this.cardPositionGetDetailFunc();
			}

		},
		methods: {

			cardPositionGetDetailFunc() {
				cardPositionGetDetail({
					id: this.options.id
				}).then(res => {
					if (res.status == 200) {
						let data = res.data;
						this.form.name = res.data.company_name;
						this.form.descAddr = data.address_detail;
						this.form.post = data.position;
						this.form.addr = data.address;
						this.form.industry = data.industry
						this.form.scale = data.scale ? data.scale.split(',') : [];
					} else {
						uni.showToast({
							title: '暂无详细信息',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack();
						}, 1200)
					}
				})
			},
			submitUpdateClick() {
				if (!this.form.name) {
					uni.showToast({
						title: '请输入公司名称',
						icon: 'none'
					})
					return
				}
				if (!this.form.post) {
					uni.showToast({
						title: '请输入公司职位',
						icon: 'none'
					})
					return
				}
				if (!this.form.industry) {
					uni.showToast({
						title: '请选择行业',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.addr) {
					uni.showToast({
						title: '请选择公司所在地',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.addr) {
					uni.showToast({
						title: '请选择公司所在地',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.descAddr) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '请求中...',
					mask: true
				})

				cardPositionUpdate({
					id: this.options.id,
					company_name: this.form.name,
					position: this.form.post,
					address: this.form.addr.replace(/,/g, ''),
					city_id: this.areaCode,
					address_detail: this.form.descAddr,
					industry: this.form.industry,
					scale: this.form.scale ? this.form.scale.join(',') : '',
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					if (res.status == 200) {
						uni.$emit('createPostSubmit');
						setTimeout(() => {
							uni.navigateBack();
						}, 1500)
					}
				})
			},
			otherLabelFunc() {
				otherLabel({
					type: 4
				}).then(res => {
					this.industryList = res.data.map(item => {
						return {
							...item,
						}
					})
				})
			},
			// 企业规模
			otherLabelList() {
				otherLabel({
					type: 5
				}).then(res => {
					res.data.forEach(item => {
						item.label.forEach((obj, _i, arr) => {
							arr[_i]['select'] = false
						})
					})
					this.labelList = res.data;
				})
			},
			submitClick() {
				
				if (!this.form.name) {
					uni.showToast({
						title: '请输入公司名称',
						icon: 'none'
					})
					return
				}
				if (!this.form.post) {
					uni.showToast({
						title: '请输入公司职位',
						icon: 'none'
					})
					return
				}
				if (!this.form.industry) {
					uni.showToast({
						title: '请选择行业',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.addr) {
					uni.showToast({
						title: '请选择公司所在地',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.addr) {
					uni.showToast({
						title: '请选择公司所在地',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.descAddr) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}
				

				uni.showLoading({
					title: '请求中...',
					mask: true
				})
				cardPositionCreate({
					company_name: this.form.name,
					position: this.form.post,
					address: this.form.addr.replace(/,/g, ''),
					city_id: this.areaCode,
					address_detail: this.form.descAddr,
					industry: this.form.industry,
					scale: this.form.scale ? this.form.scale.join(',') : '',
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					if (res.status == 200) {
						uni.$emit('createPostSubmit');
						setTimeout(() => {
							uni.navigateBack();
						}, 1500)
					}
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none',
						duration: 4000
					});
				})

			},
			deleteScale(item, index) {
				this.form.scale.splice(index, 1)
			},
			completeScale() {
				let arr = [];
				this.labelList.forEach(item => {
					item.label.forEach(obj => {
						if (obj.select) {
							arr.push(obj.name)
						}
					})
				})
				this.form.scale = arr;
				this.closeScalePoup();
			},
			selectScaleItem(item, obj) {
				item.label.forEach((_item, _index, _arr) => {
					_arr[_index]['select'] = false;
				})
				obj.select = true;
			},
			selectIndustry(item, index) {
				this.form.industry = item.name;
				this.$refs.popupHy.close();
			},
			handleCancel() {
				this.showUniAddressSelector = false;
			},
			handleConfirm(res) {
				if (!res.areaCode) {
					uni.showToast({
						title: '请选择到区县',
						icon: 'none'
					})
					return;
				}
				this.areaCode = res.cityObj.areaCode
				this.showUniAddressSelector = false;
				this.areaInfoObj = res;
				this.form.addr = res.fullAreaTextInitial;
			},
			// 获取地区数据
			getAddress(title, data) {
				// 这里写自己的赋值操作
			},
			// 打开地区选择器
			selectAddr(e) {
				this.showUniAddressSelector = true;
			},
			selectScale() {
				this.$refs.popupScalePoup.open('bottom')
			},
			closeScalePoup() {
				this.$refs.popupScalePoup.close();
			},

			closeHyPoup() {
				this.$refs.popupHy.close();
			},
			selecthy() {
				this.$refs.popupHy.open('bottom')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box-item-box {
		background-color: #EEEEFF;
		width: fit-content;
		padding-left: 30rpx;
		padding-right: 20rpx;
		padding-top: 6rpx;
		padding-bottom: 6rpx;
		color: #00009E;
		border-radius: 60rpx;
	}

	.box-item {
		width: 100%;
		height: 85rpx;
		line-height: 85rpx;
		background-color: #F4F5FA;
		text-align: center;
		border-radius: 6rpx;
		color: #333333;
	}

	.box-item-active {
		background-color: #EEEEFF;
		color: #00009E;
		font-weight: bold;
	}

	.box-label-pop-btn {
		line-height: 90rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 20rpx;
		border-radius: 6rpx;
		width: 96%;
		margin-left: 50%;
		transform: translateX(-50%);
		height: 90rpx;
		background-color: #00009E;
		color: white;
		font-weight: bold;
		text-align: center;
		font-size: 32rpx;
	}

	.box-label-pop-btn:active {
		opacity: .5;
	}

	.box-item-boxs {
		padding: 20rpx;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20rpx;
	}

	.boo-hy-for {
		font-size: 34rpx;
		padding: 30rpx;
	}

	.popup-content {
		height: 70vh;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.box-btn-save {
		margin-left: 50%;
		transform: translateX(-50%);
		position: fixed;
		bottom: 20rpx;
		left: 0;
		font-size: 34rpx;
		text-align: center;
		line-height: 90rpx;
		color: white;
		font-weight: bold;
		width: 90%;
		height: 90rpx;
		background-color: #00009E;
		border-radius: 6rpx;
	}

	.box-btn-save:active {
		opacity: .5;
	}

	.box-default {
		width: fit-content;
		margin-left: auto;
		display: flex;
		align-items: center;
		margin-top: 60rpx;
	}

	.box-main {
		background-color: white;
		padding: 30rpx;
	}

	.must {
		color: red;
		font-weight: bold;
	}
</style>